<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/jquery.mloading.css" rel="stylesheet" />
    <link href="css/common.css?v=22" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <title>e车险保</title>

    <style type="text/css">
        .chec-one{
            margin-right:4px;
        }
        .box  .item{
            padding: 0 1rem;
            margin-top: 5.1rem;
        }
        .item i {
            position: relative;
            right: auto;
            top: auto;
            margin-top:auto;
        }
        .box  .item .left{
            flex:0.5;
            -webkit-flex:0.5;
        }
        input.license-no{
            text-transform:uppercase;
        }

        .box .item .right {
            flex: 2;
            -webkit-flex: 2;
            text-align: right;
        }
        .license{
            /*float:left;*/
            display: inline-block;
            width: 5rem;
            height: 3.2rem;
            line-height: 3.2rem;
            border-radius: 1.5rem;
            background-color: #0080CC;
            color: #fff;
            text-align: center;
            padding:0;
            margin: 0.8rem 0.2rem;
            text-transform:uppercase;
        }
        .box  .item .right input.letter{
            display: inline-block;
            width:2.04545rem;
            height: 2.54545rem;
            background: #F5F5F5;
            padding-right: 0;
            text-align: center;
            outline: none;
           /* border:1px solid #f0f0f0;
            box-shadow: none;*/
            text-transform:uppercase;
            border-radius: 0;
            font-size: 1.36363636rem;
            color: #333333;
            ime-mode:inactive;
        }
        .input-box{
            display: inline-block;
        }
        .warn{
            text-align: center;
            display: inline-block;
        }
        .warn-text{
            text-align: left;
            font-size: 1.272727rem;
            color: #333333;
            letter-spacing: -0.35px;
            line-height: 2.636363rem;
        }
        .warn-box{
            text-align: center;
            margin-top: 2.73rem;
        }
    </style>
</head>
<body class="bacc" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
    <div class="box">
        <div class="top-title">车险报价</div>
        <div class="item">
            <div class="left">车牌号码</div>
            <div class="right" style="text-align: center;">
                <span class="license"><span class="city" id="city">川</span>
                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                </span>
                <div class="input-box">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                    <input readonly onfocus="document.activeElement.blur();" class="letter" type="text" maxlength="1">
                </div>
            </div>
        </div>
        <div class="checkbox">
            <div class="chec-one" id="is-new">
                <input type="checkbox" id="three"  class="hide"/>
                <label for="three"></label>
            </div>
            新车
        </div>
        <div class="button">
            <input type="button" value="下一步" id="to-next" >
        </div>
    </div>
    <div class="warn-box">
        <div class="warn">
            <p class="warn-text">提示</p>
            <p class="warn-text">※ 输入车牌即可获知保费具体优惠金额</p>
            <p class="warn-text">※ "新车"指首次购买车险车辆，如非新车请勿选择</p>
        </div>
    </div>
	
	<!-- 自定义键盘-->
	<div id="keyboard">
		<div class="keyTop">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span>0</span>
		</div>
		<div>
			<span>Q</span>
			<span>W</span>
			<span>E</span>
			<span>R</span>
			<span>T</span>
			<span>Y</span>
			<span>U</span>
			<span>I</span>
			<span>O</span>
			<span>P</span>
		</div>
		<div>
			<span class="keyTow">A</span>
			<span>S</span>
			<span>D</span>
			<span>F</span>
			<span>G</span>
			<span>H</span>
			<span>J</span>
			<span>K</span>
			<span>L</span>
		</div>
		<div>
			<p class="cancel">
				<img src="images/qx.png"/>
			</p>
			<span>Z</span>
			<span>X</span>
			<span>C</span>
			<span>V</span>
			<span>B</span>
			<span>N</span>
			<span>M</span>
			<p class="delete">
				<img src="images/sc.png"/>
			</p>
		</div>
	</div>
	
    <div class="ham">

    </div>
    <div class="modal hide">
        <div class="body">
            <div class="content" id="my-province">
            </div>
            <div class="footer" id="cancel">
                <input type="button" value="取消">
            </div>
        </div>
    </div>
    <div class="mask hide"></div>
    <div class="alert"></div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mloading.js"></script>
<script src="js/common.js?v=123"></script>
<script>
    $("#to-next").click(function(){

      var len = $("#is-new input:checked").length;
        var licenseNo = $($(".letter")[0]).val() + $($(".letter")[1]).val() + $($(".letter")[2]).val() + $($(".letter")[3]).val() + $($(".letter")[4]).val() + $($(".letter")[5]).val();
        if(len == 1){
            toNewCarPage();
        }else if(len == 0){
            if(licenseNo.length < 6){
                popInfo("车牌输入不完整");
                return;
            }else{
                licenseNo = $("#city").text()+licenseNo.toUpperCase();
                localStorage.setItem("YDSF_licenseNo",licenseNo);
                if(!carReg.test(licenseNo)){
                    popInfo("车牌格式不对","#license-no");
                    return;
                }
            }
          //  $("body").mLoading(config);
            getInsuranceByNo(licenseNo);
        }
    });
    $(".license").click(function(){
        $(".modal").show();
        $(".mask").show();
    });
    $(".modal").click(function(){
        $(".modal").hide();
        $(".mask").hide();
    });
    $(".modal .body").click(function(){
        event.stopPropagation();
    });
    $("#cancel").click(function(){
        $(".modal").hide();
        $(".mask").hide();
    });

    $(function(){


        var thisURL = decodeURI(location.href);
        if(thisURL.split('?').length > 1){
            var  getval;
            getval =thisURL.split('?')[1];
            var param = getval.split("=")[1];
            if(param == "mobile"){
                $(".ham").append('<img src="images/mobile.png" alt="">');
            }
        }

        initLocalstorage();
        getProvince();
    });

    //定位
//    function getLocation()
//    {
//        if (navigator.geolocation)
//        {
//            //navigator.geolocation.getCurrentPosition();
//        }
//        else
//        {
//            alert("该浏览器不支持获取地理位置。");
//        }
//    }
    /**
     * 获取所有可以购买险种
     */
    function getInsuranceType(flag){
        var url = ip + "/insurance/insurancetypes";
        $.ajax({
            type: "post",
            url: url,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(data){
                if(data.code == "0000"){
                    var YDSF = JSON.parse(localStorage.getItem("YDSF"));
                    YDSF.insurancetypes = data.data;
                    localStorage.setItem("YDSF",JSON.stringify(YDSF));
                    $("body").mLoading("hide");
                    if(flag){
                        window.location.href = "newCar.html";
                    }else{
                        window.location.href = "carInsurancePrice.html";
                    }
                }else{
                    popInfo(data.msg);
                }
            },
            error:function(xhr,textStatus){
                $("body").mLoading("hide");
                popInfo("网络异常，请稍后重试。");
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    }

    /**
     * 根据车牌号查询上年报价信息
     */
    function getInsuranceByNo(licenseNo){
        $("body").mLoading(config);
        $.ajax({
            url:ip+"/quote/simulate/licenseno",
            type:"post",
            data:JSON.stringify({"licenseNo":licenseNo}),
            dataType:'json',
            contentType : 'application/json; charset=utf-8',
            success:function(data){
                if(data.code == "0000"){
                    $("body").mLoading("hide");
                    if(data.data.insurance.code == "0000"){
                        var YDSF = JSON.parse(localStorage.getItem("YDSF"));
                        YDSF.carInfo = data.data;
                        localStorage.setItem("YDSF",JSON.stringify(YDSF));

                        getInsuranceType(false);
                    }else{
                        if(data.data.insurance.msg != ""){
                            popInfo(data.data.insurance.msg);
                        }else{
                            popInfo("网络异常，请稍1111后重试。");
                        }
                    }
                }else if(data.code == "0002"){
                    $("body").mLoading("hide");
                    popInfo("请求超时");
                }else if(data.code == "0201"){
                    $("body").mLoading("hide");
                    toNewCarPage();
                }else{
                    $("body").mLoading("hide");
                    popInfo(data.msg);
                }
            },
            error:function(xhr,textStatus){
                $("body").mLoading("hide");
                popInfo("网络异常，请稍后重试。");
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    }

    /**
     * 到新车页面
     * @param flag（是否未从未报过价的车）
     */
    function toNewCarPage(flag){
        localStorage.setItem("YDSF_isNew",true);
        localStorage.setItem("YDSF_licenseNo","新车");
        getInsuranceType(true);
    }

    /**
     * 获取省份信息
     */
    function getProvince() {
        var url = ip + "/province";
        $("body").mLoading({
            text:"初始化信息，请稍等...",//加载文字，默认值：加载中...
            icon:"images/loading.gif",//加载图标，默认值：一个小型的base64的gif图片
            html:false,//设置加载内容是否是html格式，默认值是false
            content:"",//忽略icon和text的值，直接在加载框中显示此值
            mask:true//是否显示遮罩效果，默认显示
        });
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                if(data.code != "0000"){
                    popInfo("网络异常，请稍后重试。");
                    return;
                }
                var province = data.data;
                var len = province.length;
                var html = "";
                var body = "";
                var index = -1;
                if ((len % 8) != 0) {
                    index = Math.ceil(len / 8);
                }
                for (var i = 0; i < len; i++) {
                    if (i == 0) {
                        body = "<div class='row'><div class='col'data-code=" + province[i].gbcode + ">" + province[i].provinceBriefName + "</div>";
                    } else if (i % 8 == 0) {
                        body = "</div><div class='row'><div class='col' data-code=" + province[i].gbcode + ">" + province[i].provinceBriefName + "</div>";
                    } else {
                        body = "<div class='col' data-code=" + province[i].gbcode + ">" + province[i].provinceBriefName + "</div>";
                    }
                    html = html + body;
                }
                if (index != -1) {
                    var time = index * 8 - len;
                    for (var i = 0; i < time; i++) {
                        body = "<div class='col last'></div>";
                        html = html + body;
                    }
                }
                html = html + "</div>";
                $("#my-province").append(html);
                $(".row .col").on("click", (function () {
                    // localStorage.setItem("cityCode",$(this).attr("data-code"));

                    var YDSF = JSON.parse(localStorage.getItem("YDSF"));
                    YDSF.cityCode = $(this).attr("data-code");
                    localStorage.setItem("YDSF", JSON.stringify(YDSF));

                    var text = $(this).text();
                    $(".license span").text(text);
                    $(".modal").hide();
                    $(".mask").hide();
                }));
                $("body").mLoading("hide");
            },
            error: function (xhr, textStatus) {
                $("body").mLoading("hide");
                popInfo("网络异常，请稍后重试。");
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);

            }
        });
    }

    /**
     * 初始化本地存储
     */
    function initLocalstorage(){
        var YDSF = {};
        localStorage.setItem("YDSF_licenseNo","");
        localStorage.setItem("YDSF",JSON.stringify(YDSF));
        localStorage.setItem("YDSF_isNew",false);
        localStorage.setItem("YDSF_carInfo","");
        localStorage.setItem("YDSF_personInfo","");
    }
</script>
